<template>
    <el-form inline="true">
      <el-form-item label="创建日期">
        <el-date-picker v-model="datetimeRange" style="width: 240px" type="datetimerange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="作业名称">
        <el-input v-model="params.title" placeholder="请您输入要搜索的作业名称" />
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" plain>搜索</el-button>
        <el-button @click="onReset" plain type="info">重置</el-button>
        <el-button type="primary" :icon="Plus" plain @click="onAddHomework">添加作业</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table height="526px" :data="homeworkList">
      <el-table-column prop="title" label="作业标题"/>
      <el-table-column prop="startTime" width="180px" label="作业开始时间" />
      <el-table-column prop="endTime" width="180px" label="作业结束时间" />
      <el-table-column prop="status" width="100px" label="是否发布">
        <template #default="{ row }">
          <div v-if="row.status == 0">
            <el-tag type="danger">未发布</el-tag>
          </div>
          <div v-if="row.status == 1">
            <el-tag type="success">已发布</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createName" width="140px" label="创建用户" />
      <el-table-column prop="createTime" width="180px" label="创建时间" />
      <el-table-column label="操作" width="300px">
        <template #default="{ row }">
          <el-button v-if="row.status == 0" type="text" @click="onEdit(row.examId)">编辑</el-button>
          <el-button v-if="row.status == 0" type="text" @click="onDelete(row.examId)" class="red">删除</el-button>
          <el-button v-if="row.status == 1" type="text" @click="cancelPublishHomework(row.examId)">撤销发布</el-button>
          <el-button v-if="row.status == 0" type="text" @click="publishHomework(row.examId)">发布</el-button>
          <el-button type="text" @click="goToHomeworkQuestion(row.examId)">题目管理</el-button>
          <el-button type="text" @click="openStudentDialog(row.examId)">学生情况</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
      v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 15, 20]"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <!-- 学生情况弹窗 -->
    <el-dialog v-model="studentDialogVisible" title="学生作业成绩" width="500px">
      <el-table :data="studentScoreList" style="width: 100%">
        <el-table-column prop="studentName" label="学生姓名" />
        <el-table-column prop="score" label="得分" />
        <el-table-column prop="totalScore" label="总分" />
      </el-table>
      <template #footer>
        <el-button @click="studentDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { Plus } from '@element-plus/icons-vue'
  import { getExamListService, delExamService, publishExamService, cancelPublishExamService, getHomeworkScoreService } from '@/apis/homework'
  import { reactive,ref } from 'vue'
  import router from '@/router'
  import { useRoute } from 'vue-router'
  
  const route = useRoute()
  const courseId = route.params.courseId
  const type = route.query.type
  
  function isNotStartHomework(exam) {
    const now = new Date(); //当前时间
    return new Date(exam.startTime) > now
  }
  
  const params = reactive({
    pageNum: 1,
    pageSize: 10,
    startTime:'',
    endTime:'',
    title: ''
  })
  
  const homeworkList = ref([])
  const total = ref(0)
  const datetimeRange = ref([])
  const studentDialogVisible = ref(false)
  const studentScoreList = ref([])
  
  async function getExamList() {
    if (datetimeRange.value[0] instanceof Date) {
      params.startTime = datetimeRange.value[0].toISOString()
    }
    if (datetimeRange.value[1] instanceof Date) {
      params.endTime = datetimeRange.value[1].toISOString()
    }
    const result = await getExamListService({ ...params, courseId })
    homeworkList.value = result.rows
    total.value = result.total
  }
  getExamList()
  
  function handleSizeChange(newSize) {
    params.pageNum = 1
    getExamList()
  }
  
  function handleCurrentChange(newPage) {
    getExamList()
  }
  
  function onSearch() {
    params.pageNum = 1
    getExamList()
  }
  
  function onReset() {
    params.pageNum = 1
    params.pageSize = 10
    params.title = ''
    params.startTime = ''
    params.endTime = ''
    datetimeRange.value.length = 0
    getExamList()
  }
  
  function onAddHomework() {
    router.push(`/oj/layout/UpdateHomework?type=add&courseId=${courseId}`)
  }
  
  async function onEdit(examId) {
    router.push(`/oj/layout/UpdateHomework?type=edit&examId=${examId}&courseId=${courseId}`)
  }
  
  async function onDelete(examId) {
    await delExamService(examId)
    params.pageNum = 1
    getExamList()
  }
  
  async function publishHomework(examId) {
    await publishExamService(examId)
    getExamList()
  }
  
  async function cancelPublishHomework(examId) {
    await cancelPublishExamService(examId)
    getExamList()
  }
  
  function goToHomeworkQuestion(examId) {
    if (!examId) {
      ElMessage.error('examId不存在');
      return;
    }
    router.push(`/oj/layout/homework-question/${examId}?courseId=${courseId}`);
  }
  
  async function openStudentDialog(examId) {
    try {
      const res = await getHomeworkScoreService(examId, courseId)
      if (res.code === 1000) {
        studentScoreList.value = res.data || []
      } else {
        studentScoreList.value = []
      }
      studentDialogVisible.value = true
    } catch (e) {
      studentScoreList.value = []
      studentDialogVisible.value = true
    }
  }
  
  </script>